<template>

    <a-tabs v-model:activeKey="activeKey" type="editable-card" @edit="onEdit" @change="onchange" destroyInactiveTabPane>
        <a-tab-pane v-for="(row, index) in rows" :key="index" :tab="row.name" :closable="false">
            <div>
                <Item :config="row.config" :id="row.id" />
            </div>
        </a-tab-pane>
    </a-tabs>


    <div v-if="rows[activeKey]" :class="$style.footer">
        <div style="flex: 1;">编码：{{ rows[activeKey].code }}</div>
        <a-space>
            <a-button type="primary" danger @click="del">删除</a-button>
            <a-button type="primary" @click="visible = true">编辑</a-button>
        </a-space>
    </div>

    
    <BDrawer v-model:visible='visible' :title='dialogTitle' width='600px' :confirm='submit'>
        <Edit :row="currentRow" ref="formRef" />
    </BDrawer>
</template>

<script lang='ts' setup>
    import { listApi, deleteApi } from '@/api/system/Config'
    import { message, Modal } from 'ant-design-vue'
    import { ref } from 'vue'
    import { useI18nStore } from '@/store/i18n'
    import { useResourceStore } from '@/store/resource'
    import Edit from './Edit.vue';
    import Item from './Item.vue'



    const activeKey = ref(0);
    const visible = ref(false)
    const formRef = ref()
    const dialogTitle = ref()

    const currentRow = ref<any>()

    const rows = ref<any[]>([])


    const onEdit = (targetKey: number, action: string) => {
        if (action === 'add') {
            currentRow.value = null
            dialogTitle.value = '新增'
            visible.value = true
        } else {
            
        }
    };

    function onchange(index:number) {
        currentRow.value = rows.value[index]
    }

    function del() {
        const row = rows.value[activeKey.value]
           
        Modal.confirm({
            title: '确定删除吗',
            onOk : async() => {
                const res = await deleteApi(row.id)
                if(res.success) {
                    getList()
                    rows.value.splice(0)
                    if(activeKey.value > 0) {
                        activeKey.value -= 1
                    }

                    message.success('删除成功')
                }else {
                    Modal.error({
                        title : res.msg
                    })
                }
            }
        });

    }

    async function submit() {
        const res = await formRef.value.submit()

        if(res.success) {
            getList()
            rows.value.splice(0)
            if(!currentRow.value) {
                
                activeKey.value = 0
            }
           
            visible.value = false
            message.success('保存成功')
        }else {
            Modal.error({
                title : res.msg
            })
        }
    }


    function getList(){
        listApi().then(r => {
            if(r.data && r.data.length > 0) {
                rows.value = r.data
                currentRow.value = rows.value[activeKey.value]
            }
            
            
        })
    }


    getList()
    
</script>

<style lang="scss" module>
    .footer{
        position: fixed;
        bottom: 0px;
        right: 0;
        width: calc(100% - $asideWidth);
        border-block-start: 1px solid rgba(5, 5, 5, 0.06);
        padding: 20px;
        background-color: #fff;

        display: flex;
        align-items: center;
        justify-content: right;

    }
</style>